<template>
    <div>

        <div>
            <d2-crud

                    :rowHandle="driveRowHandle"
                    @row-add="handleRowAdd"
                    @row-remove="handleRowRemove"
                    @editDriver="handleDriveRowEdit"
                    title="司机表格"
                    index-row
                    :loading="loading"
                    :columns="columns"
                    :data="currentTableData"
                    :options="options">
                <el-button slot="headerButton" type="primary" @click="handleRowAdd">新建司机</el-button>
            </d2-crud>
        </div>
        <el-dialog
                title="新建司机档案"
                :visible.sync="editFormVisible"
                width="60%"
                :before-close="handleAddPageClose">
            <el-tabs v-model="tabShowPage">
                <el-tab-pane label="基本信息" name="first">
                    <el-card shadow="never">
                        <span slot="header">注册信息</span>
                        <el-form :rules="driverBaseInfoRules" ref="driverBaseInfo" :disabled="driverDisabled"
                                 :model="driverBaseInfo"
                        >
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="司机姓名" prop="driverName">
                                        <el-input v-model="driverBaseInfo.driverName" auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="司机手机" prop="driverPhone">
                                        <el-input v-model="driverBaseInfo.driverPhone" auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="身份证号" prop="pinCode">
                                        <el-input v-model="driverBaseInfo.pinCode" auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="司机籍贯" prop="birthPlace"
                                                  :rules="[{ required: true, message: '司机籍贯不能为空',trigger: 'change',type:'array'}]">
                                        <el-cascader

                                                filterable
                                                :options="regionOptions"
                                                v-model="driverBaseInfo.birthPlace"
                                                @change="handlePlaceSelect">
                                        </el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="驾驶证年检日期" prop="dLicenseAnnualDate">
                                        <el-date-picker v-model="driverBaseInfo.dLicenseAnnualDate"
                                                        auto-complete="off"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="从业资格证年检日期" prop="eLicenseAnnualDate">
                                        <el-date-picker v-model="driverBaseInfo.eLicenseAnnualDate"
                                                        auto-complete="off"></el-date-picker>
                                    </el-form-item>
                                </el-col>

                            </el-row>


                        </el-form>
                    </el-card>
                    <br/>
                    <el-card shadow="never">
                        <span slot="header">照片信息</span>
                        <el-row :gutter="20">
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            :data=uploadData

                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"

                                            :on-success="handleIdCardFrontSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.IDCardFront" :src="uploadImageUrl.IDCardFront"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>身份证正面</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleIdCardReverseSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.IDCardReverse" :src="uploadImageUrl.IDCardReverse"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>身份证反面</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleHandIDCardSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.handIDCard" :src="uploadImageUrl.handIDCard"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>手举身份证上半身照</span>
                                    </div>
                                </el-card>
                            </el-col>


                        </el-row>
                        <br/>
                        <el-row :gutter="20">
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handledLicenseOriginalSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.dLicenseOriginal"
                                             :src="uploadImageUrl.dLicenseOriginal" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>驾驶证（正本）</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handledLicenseCopySuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.dLicenseCopy" :src="uploadImageUrl.dLicenseCopy"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>驾驶证（副本）</span>
                                    </div>
                                </el-card>
                            </el-col>


                        </el-row>
                        <br/>
                        <el-row :gutter="20">
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleeLicensePic1Success"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.eLicensePic1" :src="uploadImageUrl.eLicensePic1"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span><span style="color: red">*</span>从业资格证1</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleeLicensePic2Success"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.eLicensePic2" :src="uploadImageUrl.eLicensePic2"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span>从业资格证2</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleeLicensePic3Success"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.eLicensePic3" :src="uploadImageUrl.eLicensePic3"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span>从业资格证3</span>
                                    </div>
                                </el-card>
                            </el-col>
                            <el-col :span="6" class="d2-text-center">
                                <el-card style="margin: 5px">

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleeLicensePic4Success"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.eLicensePic4" :src="uploadImageUrl.eLicensePic4"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span>从业资格证4</span>
                                    </div>
                                </el-card>
                            </el-col>

                            <el-col :span="6" class="d2-text-center">
                                <el-card>

                                    <el-upload
                                            :disabled="driverDisabled"
                                            class="avatar-uploader"
                                            :action=uploadApi
                                            :show-file-list="false"
                                            :on-success="handleeLicensePic5Success"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="uploadImageUrl.eLicensePic5" :src="uploadImageUrl.eLicensePic5"
                                             class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div style="padding: 14px;">
                                        <span>从业资格证5</span>
                                    </div>
                                </el-card>
                            </el-col>

                        </el-row>
                    </el-card>
                    <br/>
                    <span class="d2-fr">
                        <el-button type="primary" :disabled="!driverDisabled" style="text-align: center" @click="handleEditDriver"
                                   v-loading="dataloading">编辑</el-button>
                        <el-button type="primary" :disabled="driverDisabled" style="text-align: center" @click="handleSaveDriver"
                                   v-loading="dataloading">保存</el-button>
                        <el-button v-loading="dataSubmitloading" :disabled="driverDisabled" type="success" style="text-align: center"
                                   @click="handleSubmitDriver">提交</el-button>
                        <el-button type="warning" :disabled="driverDisabled" style="text-align: center" @click="handleResetObject">重置</el-button>
                    </span>
                </el-tab-pane>
                <el-tab-pane label="附加信息" name="second" :disabled="isSecondTabDisable">
                    <el-card shadow="never">
                        <span slot="header">聘用信息</span>
                        <el-form :rules="driverOtherInfoRules" ref="driverOtherInfo" :disabled="driverDisabled" :model="driverOtherInfo">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="合同编号" prop="contractNum">
                                        <el-input v-model="driverOtherInfo.contractNum" auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="岗位类型" prop="job">
                                        <el-select v-model="driverOtherInfo.job" placeholder="请选择">
                                            <el-option
                                                    label="主驾"
                                                    value="主驾">
                                            </el-option>
                                            <el-option
                                                    label="副驾"
                                                    value="副驾">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="司机类型" prop="driverType">
                                        <el-select v-model="driverOtherInfo.driverType" placeholder="请选择">
                                            <el-option
                                                    label="自有"
                                                    value="自有">
                                            </el-option>
                                            <el-option
                                                    label="外请"
                                                    value="外请">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="所属车队" prop="fleetName">
                                        <el-input v-model="driverOtherInfo.fleetName" auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="合同有效日期" prop="contactDate">
                                        <el-date-picker v-model="driverOtherInfo.contactDate"
                                                        auto-complete="off"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="原驾驶车牌号" prop="originalDLicenseNum">
                                        <el-input v-model="driverOtherInfo.originalDLicenseNum"
                                                  auto-complete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="有无药物过敏" prop="drugAllergy">
                                        <el-input type="textarea" v-model="driverOtherInfo.drugAllergy"
                                                  placeholder="若有请具体填写"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="有无遗传病" prop="disease">
                                        <el-input type="textarea" v-model="driverOtherInfo.disease"
                                                  placeholder="若有请具体填写"></el-input>
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <el-row :gutter="20">

                                <el-col :span="6" class="d2-text-center">
                                    <el-card>

                                        <el-upload
                                                :disabled="driverDisabled"
                                                class="avatar-uploader"
                                                :action=uploadApi
                                                :show-file-list="false"
                                                :on-success="handlehealthPicSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="uploadImageUrl.healthPic" :src="uploadImageUrl.healthPic"
                                                 class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                        <div style="padding: 14px;">
                                            <span>健康证明照片</span>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-form>

                    </el-card>
                    <br/>
                    <el-card shadow="never">

                        <d2-crud
                                disabled="disabled"
                                title="紧急联系人"
                                :options="urgentContanterOptions"
                                add-mode
                                :add-button="addButton"
                                ref="urgentContanter"
                                :columns="urgentContanterColumns"
                                :data="urgentContanterData"
                                :form-rules="urgentContanterRules"
                                :form-template="urgentContanterFormTemplate"
                                :form-options="urgentContanterFormOptions"
                                @row-add="handleUrgentContanterRowAdd"
                                @dialog-cancel="handleUrgentContanterDialogCancel"
                                :rowHandle="urgentContanterRowHandle"
                                @row-edit="handleUrgentContanterRowEdit"
                                @row-remove="handleUrgentContanterRowRemove"
                        />

                    </el-card>
                    <br/>
                    <el-card shadow="never">
                        <span slot="header">证件信息</span>
                        <el-form :rules="driverOtherInfoRules" ref="driverOtherInfo" :disabled="driverDisabled" :model="driverOtherInfo">
                            <el-card shadow="never">
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <el-form-item label="驾驶证号" prop="dLicenseNum">
                                            <el-input v-model="driverOtherInfo.dLicenseNum"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="档案号" prop="dLicenseFileNum">
                                            <el-input v-model="driverOtherInfo.dLicenseFileNum"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发证机关" prop="dLicenseIssAuth">
                                            <el-input v-model="driverOtherInfo.dLicenseIssAuth"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="初领日期" prop="dLicenseIssDate">
                                            <el-date-picker v-model="driverOtherInfo.dLicenseIssDate"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="有效期截止" prop="dLicenseIssDate">
                                            <el-date-picker v-model="driverOtherInfo.dLicenseIssDate"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </el-card>
                            <br/>
                            <el-card shadow="never">
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <el-form-item label="从业资格证编号" prop="eLicenseNum">
                                            <el-input v-model="driverOtherInfo.eLicenseNum"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发证机关" prop="eLicenseIssAuth">
                                            <el-input v-model="driverOtherInfo.eLicenseIssAuth"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="初领日期" prop="eLicenseIssDate">
                                            <el-date-picker v-model="driverOtherInfo.eLicenseIssDate"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="有效期截止" prop="eLicenseEnd">
                                            <el-date-picker v-model="driverOtherInfo.eLicenseEnd"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </el-card>
                            <br/>
                            <el-card shadow="never">
                                <el-row :gutter="20">
                                    <el-col :span="6">
                                        <el-form-item label="押运证号" prop="escortCardnum">
                                            <el-input v-model="driverOtherInfo.escortCardnum"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发证机关" prop="escortCardIssAuth">
                                            <el-input v-model="driverOtherInfo.escortCardIssAuth"
                                                      auto-complete="off"></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="初领日期" prop="escortCardIssDate">
                                            <el-date-picker v-model="driverOtherInfo.escortCardIssDate"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="有效期截止" prop="escortCardEnd">
                                            <el-date-picker v-model="driverOtherInfo.escortCardEnd"
                                                            auto-complete="off"></el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">

                                    <el-col :span="6" class="d2-text-center">
                                        <el-card>

                                            <el-upload
                                                    :disabled="driverDisabled"
                                                    class="avatar-uploader"
                                                    :action=uploadApi
                                                    :show-file-list="false"
                                                    :on-success="handleescortCardCopySuccess"
                                                    :before-upload="beforeAvatarUpload">
                                                <img v-if="uploadImageUrl.escortCardCopy"
                                                     :src="uploadImageUrl.escortCardCopy"
                                                     class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="padding: 14px;">
                                                <span>押运证复印件</span>
                                            </div>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </el-card>

                        </el-form>

                    </el-card>
                    <br/>
                    <span class="d2-fr">
                        <el-button type="primary" :disabled="!driverDisabled" style="text-align: center" @click="handleEditDriver"
                                   v-loading="dataloading">编辑</el-button>
                        <el-button type="primary" :disabled="driverDisabled" style="text-align: center" @click="handleSaveOtherInfoDriver"
                                   v-loading="dataloading">保存</el-button>
                        <el-button v-loading="dataSubmitloading" :disabled="driverDisabled" type="success" style="text-align: center"
                                   @click="handleSubmitOtherInfoDriver">提交</el-button>
                        <el-button type="warning" :disabled="driverDisabled" style="text-align: center"
                                   @click="handleResetOtherInfoObject">重置</el-button>
                    </span>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>
    </div>
</template>

<script>
    import {regionData, CodeToText, TextToCode} from 'element-china-area-data'
    import {delDriver} from '@/api/driver/'
    import tag from '../mytag/index'
    import {saveDriver, submitDriver, saveDriverExtra, submitDriverExtra} from "../../../../api/driver";

    export default {

        props: {
            tableData: {
                default: () => []
            },
            loading: {
                default: true
            }
        },
        data() {
            return {
                //控制编辑选项显示
                editButtonShow:false,
                //控制司机所属车队显示
                showFleetName:false,
                //控制表单disabled
                driverDisabled: false,
                dataSubmitloading: false,
                //第二个tab的disable
                isSecondTabDisable: true,
                //tab显示的页面
                tabShowPage: 'first',
                //提交加载动画控制
                dataloading: false,
                //图片上传数据
                addButton: {
                    icon: 'el-icon-plus',
                    size: 'small',
                    // disabled: !this.driverDisabled
                },
                uploadApi: 'https://' + process.env.VUE_APP_API + '/files/upload',
                uploadData: {
                    filename: null,
                    ownerid: null,
                    fileid: null
                },

                uploadImageUrl: {
                    "IDCardFront": "",
                    "IDCardReverse": "",
                    "handIDCard": "",
                    "dLicenseOriginal": "",
                    "dLicenseCopy": "",
                    "eLicensePic1": "",
                    "eLicensePic2": "",
                    "eLicensePic3": "",
                    "eLicensePic4": "",
                    "eLicensePic5": "",
                    "healthPic": "",
                    "escortCardCopy": ""
                },
                //紧急联系人表格
                urgentContanterRowHandle: {
                    columnHeader: '编辑表格',


                    edit: {

                        text: '编辑',
                        size: 'mini',

                    },
                    remove: {
                        text: '删除',
                        size: 'mini',
                        type: 'danger',
                    }
                },

                //紧急联系人
                urgentContanterRules: {
                    personName: [
                        {required: true, message: '请输入联系人姓名', trigger: 'blur'},
                    ],
                    contactInfo: [
                        {
                            required: true,
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: '请输入正确的联系人手机号码',
                            trigger: 'blur'
                        },

                    ],
                    relationship: [
                        {required: true, message: '请输入联系人与司机关系', trigger: 'blur'},
                    ],
                    workplace: [
                        {required: true, message: '请输入联系人工作单位', trigger: 'blur'},
                    ],

                },
                urgentContanterFormTemplate: {
                    personName: {
                        title: '联系人姓名',
                        value: '',
                        component: {
                            span: 6
                        }
                    },
                    relationship: {
                        title: '与司机关系',
                        value: '',
                        component: {
                            span: 6
                        }
                    },
                    contactInfo: {
                        title: '联系方式',
                        value: '',
                        component: {
                            span: 6
                        }
                    },
                    workplace: {
                        title: '工作单位',
                        value: '',
                        component: {
                            span: 6
                        }
                    }
                },
                urgentContanterFormOptions: {
                    gutter: 20,

                    saveLoading: false
                },
                urgentContanterOptions: {
                    stripe: true
                },
                urgentContanterColumns: [
                    {
                        title: '姓名',
                        key: 'personName'
                    },
                    {
                        title: '关系',
                        key: 'relationship'
                    },
                    {
                        title: '联系方式',
                        key: 'contactInfo'
                    },
                    {
                        title: '工作单位',
                        key: 'workplace'
                    }
                ],
                urgentContanterData: [],
                imageUrl: '',
                //籍贯选择数据
                regionOptions: regionData,
                regionSelectedOptions: [TextToCode['湖北省'].code, TextToCode['湖北省']['十堰市'].code, TextToCode['湖北省']['十堰市']['茅箭区'].code],
                //校验
                driverBaseInfoRules: {
                    driverName: [
                        {required: true, message: '请输入司机姓名', trigger: 'blur'},
                    ],
                    driverPhone: [
                        {
                            required: true,
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: '请输入正确的司机手机号码',
                            trigger: 'blur'
                        },

                    ],
                    pinCode: [
                        {
                            required: true,
                            pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                            message: '请输入正确的司机身份证号',
                            trigger: 'blur'
                        }
                    ],
                    dLicenseAnnualDate: [
                        {required: true, message: '请选择驾驶证年检日期', trigger: 'blur'},
                    ],
                    eLicenseAnnualDate: [
                        {required: true, message: '请选择从业资格证年检日期', trigger: 'blur'},
                    ]
                },
                driverOtherInfoRules: {
                    contractNum: [
                        {required: true, message: '请输入合同编号', trigger: 'blur'},
                    ],
                    driverType: [
                        {required: true, message: '请输入司机类型', trigger: 'blur'},
                    ],
                    contactDate: [
                        {required: true, message: '请输入合同有效期', trigger: 'blur'},

                    ],
                    dLicenseNum: [
                        {required: true, message: '请输入驾驶证号', trigger: 'blur'},
                    ],
                    dLicenseFileNum: [
                        {required: true, message: '请输入档案号', trigger: 'blur'},
                    ],
                    dLicenseIssDate: [
                        {required: true, message: '请输入初领日期', trigger: 'blur'},
                    ],
                    dLicenseIssDate: [
                        {required: true, message: '请输入截止日期', trigger: 'blur'},
                    ],
                    eLicenseNum: [
                        {required: true, message: '请输入从业资格证号', trigger: 'blur'},
                    ],
                    eLicenseIssDate: [
                        {required: true, message: '请输入初领日期', trigger: 'blur'},
                    ],
                    eLicenseEnd: [
                        {required: true, message: '请输入截止日期', trigger: 'blur'},
                    ],

                },
                //详细信息
                driverBaseInfo: {
                    "driverID": "95EDEDbD-B4e4-cD77-F192-fCA111A56Fe5",
                    "registerSource": "本地",
                    "driverName": "梁平",
                    "driverPhone": "15515234445",
                    "pinCode": "410822199302044018",
                    "province": "山东省",
                    "city": "乌海市",
                    "country": "茅箭区",
                    "village": "PydxeuYr3p",
                    "dLicenseAnnualDate": "1979-05-08",
                    "eLicenseAnnualDate": "1978-04-21",
                    "IDCardFront": "eAD8f8dE-E6e6-C449-2D8d-8e223AE4F4C8",
                    "IDCardReverse": "EAAf6995-4cCb-93fA-FB36-D74Bb3EfF1Ce",
                    "handIDCard": "389cD67a-bA42-E381-d7EC-cbbCfeDDc984",
                    "dLicenseOriginal": "E2AA4c3D-d8C2-7c84-39C1-8C7DF101BbCA",
                    "dLicenseCopy": "6A82240E-2aAc-f7a8-b7E2-94f5f2913593",
                    "eLicensePic1": "F25EEa5e-1be2-32b6-5974-3D3fedDa57b3",
                    "eLicensePic2": "ceAc9F81-80fb-B081-ED9D-E7e946Ea8D9a",
                    "eLicensePic3": "4BedEBFc-1c2e-4eF6-a46b-FC82A1dfb26D",
                    "eLicensePic4": "f2E4DB8D-63D6-ba80-DC71-dA1c3276d6D1",
                    "eLicensePic5": "d992dbFa-959F-6463-FE66-8BAe30E3eb4F",
                    "birthPlace": [],
                    "status":'0'
                },
                //附加信息
                driverOtherInfo: {

                    "driverID": "C4dCce84-d6d7-EBA3-BfEf-Ba45d2A10761",
                    "driverType": "无",
                    "job": "无",
                    "contractNum": "460000200505019025",
                    "contactDate": "1999-10-06",
                    "originalDLicenseNum": "沪B74110",
                    "disease": "RhESUP8BJQ",
                    "drugAllergy": "c3xKEZbBJc",
                    "healthPic": "FcA879EB-E912-e764-353f-11b1988a8Fde",
                    "emergency": "",
                    "dLicenseNum": "710000200308216582",
                    "dLicenseFileNum": "620000200402146224",
                    "dLicenseIssAuth": "XX公安局",
                    "dLicenseIssDate": "1977-05-21",
                    "dLicenseEnd": "1974-01-01",
                    "eLicenseNum": "53000020070713787X",
                    "eLicenseIssAuth": "XX公安局",
                    "eLicenseIssDate": "2004-03-31",
                    "eLicenseEnd": "1991-11-20",
                    "escortCardnum": "370000197612202152",
                    "escortCardIssAuth": "XX公安局",
                    "escortCardIssDate": "2000-05-14",
                    "escortCardEnd": "1987-08-10",
                    "escortCardCopy": "Ab9ebda2-4eCA-FAFD-eEeb-edb6A3dfE935",
                    "fleetName":'x车队'
                },
                //控制菜单出现
                editFormVisible: false,
                //录入状态
                statueMap: {'0': '未提交', '1': '已审核', '2': '已认证'},


                //表格数据
                currentTableData: [],
                //操作按钮
                driveRowHandle: {
                    columnHeader: '编辑表格',
                    width: '300',
                    align: 'center',


                    //自定义按钮
                    custom: [
                        {

                            text: '编辑',
                            size: 'mini',
                            type: 'primary',
                            emit: 'editDriver'
                            //根据数据进行show和disable的判断
                            // show (index, row) {
                            //     if (row.showEditButton) {
                            //         return true
                            //     }
                            //     return false
                            // },
                            // disabled (index, row) {
                            //     if (row.forbidEdit) {
                            //         return true
                            //     }
                            //     return false
                            // }
                        },
                        {
                            text: '禁用',
                            type: 'warning',
                            size: 'mini',
                            emit: 'disable'
                        }
                    ],
                    remove: {

                        text: '删除',
                        size: 'mini',
                        type: 'danger'
                    },
                },
                //表格option
                options: {

                    // //根据司机状态改变数据背景
                    // rowClassName ({row, rowIndex}) {
                    //     if (row.driverCV.status === '0') {
                    //         return ''
                    //     } else if (row.driverCV.status === '1') {
                    //         return 'warning-row'
                    //     } else if (row.driverCV.status === '2') {
                    //         return 'success-row'
                    //     }
                    //
                    // }
                },
                //列数据
                columns: [

                    {
                        title: '司机姓名',
                        key: 'driverCV.driverName',
                        align: 'center'

                    },
                    {
                        title: '司机类型',
                        key: 'driverCV.driverType',
                        align: 'center'
                    },
                    {
                        title: '籍贯',
                        key: 'driverCV.originPlace',
                        align: 'center'
                    },
                    {
                        title: '手机号码',
                        key: 'driverCV.driverPhone',
                        align: 'center'
                    },
                    {
                        title: '所属车队',
                        key: 'driverCV.fleetName',
                        align: 'center'
                    },
                    {
                        title: '录入状态',
                        key: 'driverCV.status',
                        align: 'center',
                        component: {
                            name: tag,
                        }
                    },
                    {
                        title: '注册来源',
                        key: 'driverCV.registerSource',
                        align: 'center'
                    }
                ],
            }
        },
        //组件通讯
        watch: {
            tableData: {
                handler(val) {
                    this.currentTableData = val
                },
                immediate: true
            }
        },
        methods: {
            //编辑
            handleEditDriver(){
              this.driverDisabled = false
            },
            //司机附加信息操作
            handleSaveOtherInfoDriver() {
                //更新紧急联系人字段
                this.driverOtherInfo.emergency = JSON.stringify(this.urgentContanterData)
                this.dataloading = true
                saveDriverExtra(Object.assign(this.driverOtherInfo, this.uploadImageUrl)).then((res) => {
                    //判断code值删除页面显示数据行
                    if (res.code == 200) {
                        this.$notify({
                            title: "成功",
                            type: 'success'
                        })
                        this.editFormVisible = false
                    } else {
                        this.$notify({
                            title: res.message,
                            type: 'error'
                        })
                    }
                    this.dataloading = false
                })
            },
            handleSubmitOtherInfoDriver() {
                //更新紧急联系人字段
                this.driverOtherInfo.emergency = JSON.stringify(this.urgentContanterData)
                {
                    //提交
                    this.dataSubmitloading = true
                    this.$refs['driverOtherInfo'].validate((valid) => {
                        if (valid) {
                            submitDriverExtra(Object.assign(this.driverOtherInfo, this.uploadImageUrl)).then((res) => {
                                //判断code值删除页面显示数据行
                                if (res.code == 200) {
                                    this.$notify({
                                        title: "成功",
                                        type: 'success'
                                    })
                                    this.editFormVisible = false
                                } else {
                                    this.$notify({
                                        title: res.message,
                                        type: 'error'
                                    })
                                }
                                this.dataSubmitloading = false
                            })
                        } else {

                            this.dataSubmitloading = false
                            return false;
                        }
                    });
                }
            },
            handleResetOtherInfoObject() {
                Object.keys(this.driverOtherInfo).forEach(
                    key => {
                        switch (key) {
                            case 'driverID':
                            case 'emergency':
                            case 'birthPlace':
                                break
                            default:
                                this.driverOtherInfo[key] = ''
                        }
                    }
                );
            },
            //司机操表操作
            //编辑
            handleDriveRowEdit({index, row}) {
                this.driverDisabled = true
                if (row.driverCV.status == '1' || row.driverCV.status == '2') {
                    this.isSecondTabDisable = false
                } else {
                    this.isSecondTabDisable = true
                }
                //表单赋值
                Object.keys(this.driverBaseInfo).forEach(
                    key => {
                        this.driverBaseInfo[key] = row.driverCV[key]
                    }
                );
                Object.keys(this.driverOtherInfo).forEach(
                    key => {
                        this.driverOtherInfo[key] = row.driverCV[key]
                    }
                );
                //籍贯赋值
                // this.driverBaseInfo.birthPlace = [TextToCode[row.driverCV.province].code, TextToCode[row.driverCV.province][row.driverCV.city].code, TextToCode[row.driverCV.province][row.driverCV.city][row.driverCV.country].code]
                //照片赋值
                Object.keys(this.uploadImageUrl).forEach(
                    key => {
                        this.uploadImageUrl[key] = row.driverCV[key]
                    }
                );
                //紧急联系人赋值
                this.urgentContanterData = row.emergencyContacts
                this.editFormVisible = true
            },
            //清空
            handleResetObject() {
                Object.keys(this.driverBaseInfo).forEach(
                    key => {
                        switch (key) {
                            case 'driverID':

                            case 'birthPlace':
                                break
                            default:
                                this.driverBaseInfo[key] = ''
                        }
                    }
                );
                Object.keys(this.uploadImageUrl).forEach(
                    key => {
                        switch (key) {

                            default:
                                this.uploadImageUrl[key] = ''
                        }
                    }
                );
                this.isSecondTabDisable = true
            },
            //保存
            handleSaveDriver() {

                this.dataloading = true
                if (this.driverBaseInfo.pinCode) {
                    saveDriver(Object.assign(this.driverBaseInfo, this.uploadImageUrl)).then((res) => {
                        //判断code值删除页面显示数据行
                        if (res.code == 200) {
                            var newRow = new  Object()
                            newRow.driverCV = Object.assign(this.driverBaseInfo, this.uploadImageUrl)
                            newRow.emergencyContacts = []
                            this.tableData.push(newRow)

                            console.log('添加',newRow)
                            this.$notify({
                                title: "成功",
                                type: 'success'
                            })
                            this.$confirm('是否继续填写附加信息？')
                                .then(_ => {
                                    this.isSecondTabDisable = false
                                    this.tabShowPage = 'second'
                                })
                                .catch(_ => {
                                    this.editFormVisible = false

                                });
                        } else {
                            this.$notify({
                                title: res.message,
                                type: 'error'
                            })
                        }

                        this.dataloading = false

                    })
                } else {
                    this.$notify({
                        title: "至少填写身份证号才能保存当前输入",
                        type: 'error'
                    })
                }

            },
            handleSubmitDriver() {
                //判断照片添加情况
                // if (this.uploadImageUrl.IDCardFront === "") {
                //     this.$notify({
                //         title: "身份证正面照片未上传",
                //         type: 'error'
                //     })
                // } else if (this.uploadImageUrl.IDCardReverse === "") {
                //     this.$notify({
                //         title: "身份证反面照片未上传",
                //         type: 'error'
                //     })
                // } else if (this.uploadImageUrl.handIDCard === "") {
                //     this.$notify({
                //         title: "手持身份证上半身照片未上传",
                //         type: 'error'
                //     })
                // } else if (this.uploadImageUrl.dLicenseOriginal === "") {
                //     this.$notify({
                //         title: "驾驶证（正本）照片未上传",
                //         type: 'error'
                //     })
                // } else if (this.uploadImageUrl.dLicenseCopy === "") {
                //     this.$notify({
                //         title: "驾驶证（副本）照片未上传",
                //         type: 'error'
                //     })
                // } else if (this.uploadImageUrl.eLicensePic1 === "") {
                //     this.$notify({
                //         title: "从业资格证1照片未上传",
                //         type: 'error'
                //     })
                if (false) {
                } else {
                    //提交
                    this.dataSubmitloading = true
                    this.$refs['driverBaseInfo'].validate((valid) => {
                        if (valid) {
                            submitDriver(Object.assign(this.driverBaseInfo, this.uploadImageUrl)).then((res) => {
                                //判断code值删除页面显示数据行
                                if (res.code == 200) {
                                    this.$notify({
                                        title: "成功",
                                        type: 'success'
                                    })
                                    var newRow = new  Object()
                                    newRow.driverCV = Object.assign(this.driverBaseInfo, this.uploadImageUrl)
                                    newRow.emergencyContacts = []
                                    this.tableData.push(newRow)
                                    this.dataSubmitloading = false

                                } else {
                                    this.$notify({
                                        title: res.message,
                                        type: 'error'
                                    })
                                }
                            })
                        } else {
                            this.editFormVisible = false
                            return false;
                        }
                    });
                }
            },
            //紧急联系人表格操作
            handleUrgentContanterRowEdit({index, row}, done) {
                this.formOptions.saveLoading = true
                setTimeout(() => {
                    console.log(index)
                    console.log(row)
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    })

                    // done可以传入一个对象来修改提交的某个字段
                    done({
                        address: '我是通过done事件传入的数据！'
                    })
                    this.formOptions.saveLoading = false
                }, 300)
            },
            handleUrgentContanterRowRemove({index, row}, done) {
                setTimeout(() => {
                    console.log(index)
                    console.log(row)
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    done()
                }, 300)
            },
            handleUrgentContanterRowAdd(row, done) {
                this.urgentContanterFormOptions.saveLoading = true
                setTimeout(() => {

                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });

                    // done可以传入一个对象来修改提交的某个字段
                    done({
                        address: '我是通过done事件传入的数据！'
                    })
                    this.urgentContanterFormOptions.saveLoading = false
                }, 300);
            },
            handleUrgentContanterDialogCancel(done) {

                done()
            },
            //上传照片
            handleIdCardFrontSuccess(res, file) {
                this.uploadImageUrl.IDCardFront = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleIdCardReverseSuccess(res, file) {
                this.uploadImageUrl.IDCardReverse = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleHandIDCardSuccess(res, file) {
                this.uploadImageUrl.handIDCard = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handledLicenseOriginalSuccess(res, file) {
                this.uploadImageUrl.dLicenseOriginal = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handledLicenseCopySuccess(res, file) {
                this.uploadImageUrl.dLicenseCopy = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleeLicensePic1Success(res, file) {
                this.uploadImageUrl.eLicensePic1 = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleeLicensePic2Success(res, file) {
                this.uploadImageUrl.eLicensePic2 = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleeLicensePic3Success(res, file) {
                this.uploadImageUrl.eLicensePic3 = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleeLicensePic4Success(res, file) {
                this.uploadImageUrl.eLicensePic4 = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handleeLicensePic5Success(res, file) {
                this.uploadImageUrl.eLicensePic5 = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;
            },
            handlehealthPicSuccess(res, file) {
                this.uploadImageUrl.healthPic = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;

            },
            handleescortCardCopySuccess(res, file) {
                this.uploadImageUrl.healthPic = 'http://' + process.env.VUE_APP_API + '/' + res.fileurl;

            },
            //控制照片格式大小等
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //处理地区选择
            handlePlaceSelect(val) {
                this.driverBaseInfo.province = CodeToText[val[0]]
                this.driverBaseInfo.city = CodeToText[val[1]]
                this.driverBaseInfo.country = CodeToText[val[2]]
            },
            //处理关闭
            handleAddPageClose(done) {
                this.$confirm('关闭页面前是否保存已填写信息？')
                    .then(_ => {
                        this.handleSaveDriver()
                    })
                    .catch(_ => {
                        this.handleResetObject()
                        done();
                    });
            },
            //处理添加
            handleRowAdd(row, done) {
                this.editFormVisible = true
                this.tabShowPage = 'first'
            },
            //处理删除
            handleRowRemove({index, row}, done) {

                delDriver(row.driverCV).then((res) => {

                    //判断code值删除页面显示数据行
                    if (res.code == 200) {
                        this.tableData.splice(index, 1)
                        this.$notify({
                            title: res.message,
                            type: 'success'
                        })
                    } else {
                        this.$notify({
                            title: res.message,
                            type: 'error'
                        })
                    }

                    done()
                })
            },
            //处理编辑
            handleEdit(index, row) {

            },
            //处理禁用
            handleDisable(index, row) {

            }

        }
    }
</script>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 200px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }

    .avatar {
        width: 200px;
        height: 150px;
        display: block;
    }


</style>
